<template>
  <div>
    <van-nav-bar title="开始充电" left-text="返回" left-arrow @click-left="onClickLeft" />
    <van-image src="http://tianwc.oss-cn-beijing.aliyuncs.com/dev/20241122/1732244890605.png" />

    <div class="main-div">
      <div class="info-div">
        <span>充电功率</span>
        <br>
        <span class="value">{{ chargeRecord.gunPower }}Kw</span>
      </div>
      <div class="info-div">
        <span>充电电量</span>
        <br>
        <span class="value">{{ chargeRecord.batteryCapacity }}Kw</span>
      </div>
      <div class="info-div">
        <span>预计费用</span>
        <br>
        <span class="value">{{ chargeRecord.price }}</span>
      </div>
    </div>
    <div class="foot-div">
      <van-button round type="success" size="normal" @click="startCharging()" class="start-button">开始充电</van-button>
    </div>

    <!-- 对话框 -->
    <!-- <van-dialog 
      v-model:show="dialogTableVisible" 
      title="选择车辆" 
      @close="dialogTableVisible = false"
      :show-cancel-button="false" 
      :show-confirm-button="false">
      
      <div class="dialog-content">
        <div v-for="car in carList" :key="car.carNo" 
             @click="handleCarClick(car)" 
             :class="['car-item', { selected: selectedCar?.carNo === car.carNo }]">
          <p>车牌号: {{ car.carNo }}</p>
          <p>电池容量: {{ car.batteryCapacity }}Kw</p>
          <hr />
        </div>
      </div>
      
      <div class="dialog-footer">
        <van-button type="primary" @click="confirmSelection" class="confirm-button">确认</van-button>
      </div>
    </van-dialog> -->
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router';
import router from '@/router';
import { CoreGunStatus, GetCoreCost, GetCoreGunGetOnd } from '@/api/core';
// GetCoreCost
import { ref } from 'vue';
import { GetCarsBatteryCapacity } from '@/api/user';
// import { GetCarsList } from '@/api/user';

// 假设你有一个解密函数
function decryptData(encryptedData) {
  return JSON.parse(atob(encryptedData)); // 简单的 base64 解码示例
}

const onClickLeft = () => history.back();
const chargeRecord = ref({
  price: 0,
  gunPower: 0,
  batteryCapacity: 0,
  batteryCapacityStart:0
});

const routeChargeRecord = useRoute();
const encryptedData = routeChargeRecord.query.data; // 获取加密的查询参数

function ChargeGunGetOne() {
  if (encryptedData) {
    const decryptedData = decryptData(encryptedData);
    console.log('Decrypted data:', decryptedData);
    chargeRecord.value.batteryCapacityStart = decryptedData.batteryCapacity;
    GetCoreGunGetOnd(decryptedData).then(res => {
      console.log(res);
      chargeRecord.value.gunPower = res.data.data.gunPower;
     
      GetCarsBatteryCapacity(decryptedData).then(res => {
        console.log(res);
        chargeRecord.value.batteryCapacity = res.data.data;

      chargeRecord.value.price = decryptedData.price;
       GetCoreCost(chargeRecord.value).then(res => {
                console.log(res);
        chargeRecord.value.price = res.data.data;
          });

      });
    });
  }


}

ChargeGunGetOne();
// 假设你有一个加密函数
function encryptData(data) {
  return btoa(JSON.stringify(data)); // 简单的 base64 编码示例
}

function startCharging() {
  const decryptedData = decryptData(encryptedData);
  // 传递参数到目标路由
  const encryptedParams = encryptData({
    id:decryptedData.id,
    stationId:decryptedData.stationId,
    batteryCapacity: chargeRecord.value.batteryCapacity,
    price: decryptedData.price,
    batteryCapacityStart: chargeRecord.value.batteryCapacityStart,
    vehicleIdentifyNo: decryptedData.vehicleIdentifyNo
  });
  
  CoreGunStatus(decryptedData).then(res => {
    console.log(res);
    if(res.data.code==200){
      router.push({ 
        path: '/charging/starting', 
        query: { 
          data: encryptedParams // 使用加密后的参数
        } 
      });
    }
  });

}

// const dialogTableVisible = ref(false); // 初始值设置为 false
// const carList = ref([]); // 用于存储车辆信息列表
// const selectedCar = ref(null); // 用于存储当前选中的车辆

// 显示对话框的函数
// const showDialog = () => {
//   GetCarsList().then(res => {
//     console.log(res);
//     carList.value = res.data.data; // 假设返回的数据是一个数组
//   });

//   dialogTableVisible.value = true;
// };

// 处理车辆点击事件
// const handleCarClick = (car) => {
//   selectedCar.value = car; // 设置当前选中的车辆对象
//   console.log('Clicked car:', car);
// };

// 确认选择的车辆
// const confirmSelection = () => {
//   console.log('Selected car:', selectedCar.value);
//   if(selectedCar.value != null){
//     chargeRecord.value.batteryCapacity = selectedCar.value.batteryCapacity;
//   }

//   const decryptedData = decryptData(encryptedData);
//   chargeRecord.value.price = decryptedData.price;
//   GetCoreCost(chargeRecord.value).then(res => {
//     console.log(res);
//     chargeRecord.value.price = res.data.data;
//   });
//   dialogTableVisible.value = false; // 关闭对话框
// };
</script>

<style>
.main-div {
  margin: 16px;
  display: flex;
  justify-content: space-between;
  background-color: #f9f9f9;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.info-div {
  flex: 1;
  text-align: center;
  padding: 10px;
  transition: background-color 0.3s;
}

.info-div:hover {
  background-color: #e0f7fa; /* 悬停效果 */
}

.value {
  font-size: 1.5em;
  font-weight: bold;
  color: #333;
}

.foot-div {
  text-align: center;
  margin-top: 20px;
}

.start-button {
  background: linear-gradient(90deg, #4CAF50, #81C784);
  color: white;
  border-radius: 20px;
  padding: 10px 20px;
}

.dialog-content {
  max-height: 300px;
  overflow-y: auto;
  padding: 16px;
}

.car-item {
  cursor: pointer;
  padding: 10px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.car-item:hover {
  background-color: #f0f0f0;
}

.selected {
  background-color: #2196F3;
  color: white;
}

.dialog-footer {
  text-align: center;
  margin-top: 10px;
}

.confirm-button {
  background-color: #2196F3;
  color: white;
  border-radius: 20px;
  padding: 10px 20px;
}
</style>